<script setup lang="ts">
import { ref } from "@vue/reactivity";

type Props = {
  // 是否显示必须这个小红点
  requires?: boolean;
  // 输入框左边的小标题
  title?: string;
  placeStx?: string;
  // input中的提示内容
  placeholder?: string;
  // 下拉列表的选项
  list?: [];
  // 点击下拉列表后选中的值
  value?: string;
};
let prop = withDefaults(defineProps<Props>(), {
  requires: true,
  // \u00a0 是&nbsp;的十六进制的值
  placeStx: "",
  title: "输入标题：",
  placeholder: "请选择",
  list: () => [],
  value: "",
});
// 对外发送一个事件修改值
let emit = defineEmits(["changeValue"]);

// 是否显示下拉列表
let display = ref("none");

// 选中每一项下拉列表的数据时
let selectV = (v: string) => {
  emit("changeValue", v);
};

// 获取焦点
let focus = () => {
  display.value = "block";
};

// 失去焦点
let blur = () => {
  // 失去焦点时需要延迟一下，才消失不然无法获取到下拉列表的值了
  let id = setTimeout(() => {
    display.value = "none";
    clearTimeout(id);
  }, 0.21 * 1000);
};
</script>

<template>
  <label class="btn" for="btn">
    <span class="require" v-if="requires">{{ placeStx }}*</span>&nbsp;{{
      title
    }}
    <input
      id="ipt"
      type="button"
      :class="value ? 'inValue' : ''"
      :value="value || placeholder"
      @focus="focus"
      @blur="blur"
    />

    <ul class="select" :style="{ display: display }">
      <li
        @click="selectV(v)"
        v-for="(v, k) of list"
        :key="k"
        :class="v == value ? 'value' : ''"
      >
        {{ v }}
      </li>
    </ul>
  </label>
</template>

<style scoped lang="scss">
.btn {
  height: 36px;
  display: flex;
  align-items: center;
  color: #333333;
  cursor: pointer;
  position: relative;
}

#ipt {
  width: 480px;
  height: 100%;
  padding-left: 10px;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  color: #606266;
  outline: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #babfc9;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.select {
  width: 480px;
  position: absolute;
  right: 0;
  top: 45px;
  z-index: 1;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  > li {
    width: 100%;
    height: 36px;
    @include flexCenter;
    padding-left: 20px;
    color: #606266;
    position: relative;
    z-index: 10;
    transition: all 0.5s;
    background-color: #fff;
    overflow: hidden;
    &:hover {
      background-color: #f5f7fa;
    }
  }

  // ul 不能使用 overflow: hidden; 否则无法看小三角了--
  > li:first-child {
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
  }
  > li:last-child {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  // ul 不能使用 overflow: hidden; 否则无法看小三角了==

  // 小三角的样式
  &::before {
    content: " ";
    width: 10px;
    height: 10px;
    position: absolute;
    left: 50%;
    top: 0;
    z-index: -1;
    transform: rotate(45deg) translateX(-65%);
    background: #ffffff;
    box-sizing: border-box;
    border: 1px solid #e4e7ed;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
  }
}

// 选中的文本颜色
.value {
  color: #409eff !important;
}
// 当input中选有值时
.inValue {
  color: #333 !important;
}
</style>
